<template>
  <div class="container">
    <div class="header">
      <div class="avatar">
        <div class="userInfo">
          <img
            src="https://uniapp.b2b2c.niuteam.cn/upload/upload/user/haedimg/20200615071617159221977755646.png"
            alt
          />
          <div class="info">
            <div>
              <div>1555124010</div>
              <span>普通会员</span>
            </div>
          </div>
        </div>
        <i
          @click="$router.push('/mine/profile')"
          class="iconfont icon-friend_settings_light"
          style="font-size:1.2rem;color:white;opacity:.7"
        />
      </div>
      <ul class="userAssets">
        <li>
          <span>1000</span>
          <span>余额</span>
        </li>
        <li>
          <span>10</span>
          <span>积分</span>
        </li>
        <li @click="$router.push('/mine/coupon')">
          <span>1</span>
          <span>优惠券</span>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="order">
        <div class="orderTitle">
          <span>全部订单</span>
          <div class="moreOrder" @click="$router.push('/order/index')">
            查看全部订单
            <i class="iconfont icon-right" style="font-size:.8rem;margin-left:4px" />
          </div>
        </div>
        <ul class="orderStatus">
          <li>
            <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/order_1.png" alt />
            <span>待付款</span>
          </li>
          <li>
            <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/order_2.png" alt />
            <span>待发货</span>
          </li>
          <li>
            <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/order_3.png" alt />
            <span>待收货</span>
          </li>
          <li>
            <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/order_4.png" alt />
            <span>待评价</span>
          </li>
          <li>
            <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/order_5.png" alt />
            <span>退款/售后</span>
          </li>
        </ul>
      </div>
      <div class="member" @click="$router.push('/mine/member-level')">
        <div class="memberLeft">
          <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/v.png" alt />
          <span class="memberTitle">普通会员</span>
        </div>
        <div class="memberRight">
          会员等级更多权益
          <i class="iconfont icon-right" style="font-size:.6rem" />
        </div>
      </div>
      <div class="tool">
        <div class="toolTitle">常用工具</div>
        <ul class="toolList">
          <li v-for="(item,inx) in toolList" :key="inx" @click="$router.push(item.url)">
            <img :src="item.logo" alt />
            <span>{{item.title}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toolList: [
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/sign.png",
          title: "签到",
          url: "/mine/sign-in"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/person.png",
          title: "个人资料",
          url: "/mine/profile"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/find.png",
          title: "发现"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/address.png",
          title: "收货地址",
          url: "/address/list?back=/mine"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/discount.png",
          title: "优惠卷"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/point_recond.png",
          title: "我的拼单"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/gift.png",
          title: "我的礼品"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/like.png",
          title: "我的关注"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/toot.png",
          title: "我的足迹"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/point_recond.png",
          title: "兑换记录"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/cash.png",
          title: "账户列表"
        },
        {
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/fenxiao.png",
          title: "分销中心"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #f7f7f7;
}

.header {
  height: 7rem;
  background-image: linear-gradient(to right, #cf2835, #e64a49);
  position: relative;
  &::before {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    background: url("https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/bg-2.png")
      no-repeat left top/cover;
  }
  .avatar {
    height: 4.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    .userInfo {
      display: flex;
      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        border: 2px solid white;
      }
      .info {
        margin-left: 0.4rem;
        font-size: 0.7rem;
        color: white;
        display: flex;
        align-items: center;

        span {
          background-color: gray;
          padding: 0.1rem 0.5rem;
          border-radius: 0.2rem;
          font-size: 0.6rem;
        }
      }
    }
  }
  .userAssets {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      flex-direction: column;
      text-align: center;
      span {
        &:nth-child(2) {
          font-size: 0.65rem;
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}

.content {
  padding: 0 0.4em;
  background-color: white;
  .order {
    background: white;
    padding: 0 0.5rem;
    .orderTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      height: 2rem;
      > span {
        font-weight: 700;
        font-size: 0.75rem;
      }
      .moreOrder {
        display: flex;
        align-items: center;
        color: #a3a3a3;
        font-size: 0.75rem;
      }
    }
    .orderStatus {
      padding: 0.4rem 0 0.6rem;
      display: flex;
      li {
        text-align: center;
        img {
          display: block;
          width: 50%;
          margin: 0 auto;
        }
        span {
          font-size: 0.65rem;
        }
        width: 20%;
      }
    }
  }
  .member {
    background-image: linear-gradient(90deg, #241500, #1d1d1d);
    height: 1.8rem;
    border-radius: 0.4rem;
    display: flex;
    justify-content: space-between;

    color: rgb(229, 206, 117);
    padding: 0 0.4rem;
    font-size: 0.7rem;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 32px;
      height: 36px;
      right: 0;
      background: url(https://uniapp.b2b2c.niuteam.cn/upload/uniapp/member/index/member.png)
        right top / cover no-repeat;
    }
    .memberLeft {
      height: 100%;
      display: flex;
      align-items: center;
      img {
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.2rem;
      }
    }
    .memberRight {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
  .tool {
    padding: 1rem 0 0.6rem;
    .toolTitle {
      font-size: 0.7rem;
      font-weight: bold;
    }
    .toolList {
      padding: 0.4rem 0;
      display: flex;
      flex-wrap: wrap;
      li {
        padding: 0.4rem 0;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.65rem;
        color: #666;
        img {
          width: 28%;
        }
      }
    }
  }
}
</style>
